<template>
  <div class="container">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="年份">
        <DatePicker v-model="formInline.year" type="year" @fatherMethods="search"></DatePicker>
      </el-form-item>
    </el-form>

    <el-table :data="tableData.rows">
      <el-table-column prop="trainId" label="培训项目ID" width="100" />
      <el-table-column prop="trainName" label="培训项目名称" />
      <el-table-column prop="startTime" label="培训项目开始时间" width="180" />
      <el-table-column prop="endTime" label="培训项目结束时间" width="180" />
      <el-table-column label="第 x 天" width="130">
        <template #default="scope">
          {{scope.row.tagInfo.index}}
        </template>
      </el-table-column>
      <el-table-column label="对应课程标签">
        <template #default="scope">
          {{tagName(scope.row.tagInfo)}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="80" align="center">
        <template #default="scope">
          <div class="button" @click="handleClick(scope.row)">绑定标签</div>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="formInline.pageIndex" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <el-dialog :close-on-click-modal="false" v-model="dialogVisible" title="绑定课程标签" width="500" :before-close="handleClose">
      <div style="margin-bottom:10px;">
        <el-input v-model="model.index" placeholder="第 x 天" type="number" />
      </div>
      <el-select filterable v-model="model.tagId" placeholder="请选择课程标签">
        <el-option v-for="item in tags" :key="item.tagid" :label="item.tagname" :value="item.tagid" />
      </el-select>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="save" :loading="loading">
            确 认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/store/counter";
const counter = useCounterStore();

let dialogVisible = ref(false);
let formInline = ref({
  year: proxy.$utils.dateTimeFormateFn(Date.now(), "year"),
  pageIndex: 1,
  pageSize: 50,
});
let tableData = ref({});
let tags = ref([]);
let model = ref({
  trainId: "",
  tagId: "",
  index: null,
});
let loading = ref(false);

onMounted(() => {
  search();
  getTag();
});

function tagName(tagInfo) {
  if (tagInfo.tagId) {
    let index = proxy.$utils.findIndexByField(
      tags.value,
      "tagid",
      tagInfo.tagId
    );
    if (index != -1) return tags.value[index].tagname;
  } else {
    return "-";
  }
}

async function getTag() {
  tags.value = await proxy.$apis.moxueyuanTags({ type: "list" });
}

async function handleClick(e) {
  model.value.trainId = e.trainId;
  dialogVisible.value = true;
}

function handleClose() {
  model.value = { trainId: "", tagId: "", index: null };
  dialogVisible.value = false;
}

async function save() {
  try {
    if (!model.value.index) return proxy.$utils.showToast("请输入序号");
    if (!model.value.tagId) return proxy.$utils.showToast("请选择课程标签");
    loading.value = true;
    await proxy.$apis.trainList({
      data: model.value,
      type: "bindTag",
    });
    getInfo();
    proxy.$utils.showToast("绑定成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

function search() {
  formInline.value.pageIndex = 1;
  getInfo();
}

async function getInfo() {
  tableData.value = await proxy.$apis.trainList({
    data: formInline.value,
    type: "list",
  });
}
</script>



<style lang="scss" scoped>
.container {
  margin: 20px;
}
</style>






